<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author ThinkGem
-->
<template>
  <BasicDrawer
    v-bind="$attrs"
    :showFooter="true"
    @register="register"
    width="40%"
    @ok="setTimeout(closeDrawer)"
  >
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel
        key="1"
        :showArrow="false"
        :header="`当前任务【名称：${orderPic.picname}】`"
        :style="customStyle"
      >
        <BasicTable @register="registerTable">
          <!-- 表格右上角自定义按钮（新增...） -->
          <template #taskCode="{ record }">
            <div :style="currentTaskCode == record.taskCode ? { color: 'red' } : ''">
              （{{ record.taskCode }}）{{ record.orderPic.picno + '-' + record.orderPic.picname }}
            </div>
          </template>
        </BasicTable>
      </a-collapse-panel>
      <a-collapse-panel
        key="2"
        :showArrow="false"
        header="机床任务队列"
        :style="customStyle"
        v-if="openType === '2'"
      >
        <BasicTable @register="registerTable2" />
      </a-collapse-panel>
    </a-collapse>
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsPoolDataList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { listSet } from '/@/api/test/testData';

  import { taskPoolListData, preTaskPoolListData } from '/@/api/m8/machine/task';

  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { tabConfigData } from '/@/utils/custom';

  const activeKey = ref(['1', '2']);

  let tableColumns = ref<any>([]);
  let layVoucherView = ref<any>({});
  let listTabConfig = ref<any>({});

  let tableColumns2 = ref<any>([]);
  let layVoucherView2 = ref<any>({});
  let listTabConfig2 = ref<any>({});

  const currentTaskCode = ref('');
  let openType = ref('');
  let orderPic = ref({
    picname: '',
  });

  const customStyle = 'background: #f7f7f7;border-radius: 4px;margin-bottom: 15px;border: 0;';

  let pubConfig = {
    showTableSetting: false, //表格右上角3个默认按钮
    useSearchForm: false, //表单是否展示
    canResize: true, //表格是否flex布局
    pagination: false,
    immediate: false,
  };
  const [registerTable, { setProps, reload }] = useTable({
    columns: tableColumns, //配置表格内容数组对象
    ...pubConfig,
  });

  const [registerTable2, { setProps: setProps2, reload: reload2 }] = useTable({
    columns: tableColumns2, //配置表格内容数组对象
    ...pubConfig,
  });
  const [register, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
    currentTaskCode.value = data.taskCode;
    orderPic.value = {
      picname: '',
    };
    if (data.orderPic) {
      orderPic.value = data.orderPic;
    }
    openType.value = data.openType;
    setDrawerProps({
      title: data.title,
      maskClosable: true,
      width: '80%',
      showOkBtn: false,
    });
    const res = await listSet({ viewCode: 'M8_machine_pool_list' });
    layVoucherView.value = res.layVoucherView;

    tableColumns.value = layVoucherView.value.flistTabCols; //表格表头

    listTabConfig.value = tabConfigData(res.layVoucherView.listTabConfig);
    let config1 = {
      api: taskPoolListData,
      searchInfo: {
        'orderPic.id': data.orderPic && data.orderPic.id,
      },
    };
    if (data.openType === '2') {
      config1['maxHeight'] = 200;
    }
    setProps(config1);
    reload();
    if (data.openType === '2') {
      const res1 = await listSet({ viewCode: 'M8_machine_pool_list2' });
      layVoucherView2.value = res1.layVoucherView;
      tableColumns2.value = layVoucherView2.value.flistTabCols; //表格表头
      listTabConfig2.value = tabConfigData(res1.layVoucherView.listTabConfig);
      setProps2({
        api: preTaskPoolListData,
        searchInfo: {
          machine: data.machine,
        },
        maxHeight: 200,
      });
      reload2();
    }
  });
</script>
